<template>
  <div class="salon_diagnose_8">
    <div class="diagnose_8_table">
      <table border="0" cellpadding="8">
        <colgroup>
          <col span="2" style="border: 2px solid #d2dcf4" />
          <col span="5" style="background-color: none" />
        </colgroup>
        <tr>
          <th style="width: 240px; text-align: center"></th>
          <th style="width: 240px; text-align: center">关键点提示</th>
          <th style="width: 130px; text-align: center">是否有具体条款</th>
          <th style="width: 150px; text-align: center">制度设计是否合理</th>
          <th style="width: 170px; text-align: center">
            <div>
              <span>制度设计是否闭环</span>
              <el-tooltip class="item" effect="dark" content="发布机制，落地实施、结果确认，处置" placement="top">
                <img
                  src="@/assets/images/question_mark.svg"
                  alt="question mark"
                  style="width: 16px; height: 16px; margin: 0 0 0 5px" />
              </el-tooltip>
            </div>
          </th>
          <th style="width: 180px; text-align: center">是否100%宣贯</th>
          <th style="width: 260px; text-align: center">执行情况</th>
        </tr>
        <tr v-for="item in formModel">
          <th style="text-align: left">{{ item.name }}</th>
          <td style="text-align: left">
            <span v-if="item.tip.length <= 14">{{ item.tip }}</span>
            <el-tooltip v-else class="item" effect="dark" :content="item.tip" placement="top-start">
              <span>{{ item.tip.substring(0, 14) + '...' }}</span>
            </el-tooltip>
          </td>
          <td>
            <div>
              <span v-if="form[item.value].hsc === 1" style="color: #85ce61">有</span>
              <span v-if="form[item.value].hsc === 0" style="color: #f78989">无</span>
              <span v-if="form[item.value].hsc === -1">未知</span>
            </div>
          </td>
          <td>
            <div>
              <span v-if="form[item.value].sdr === 1" style="color: #85ce61">合理</span>
              <span v-if="form[item.value].sdr === 0" style="color: #f78989">不合理</span>
              <span v-if="form[item.value].sdr === -1">未知</span>
            </div>
          </td>
          <td>
            <div>
              <span v-if="form[item.value].sdcl === 1" style="color: #85ce61">闭环</span>
              <span v-if="form[item.value].sdcl === 0" style="color: #f78989">未闭环</span>
              <span v-if="form[item.value].sdcl === -1">未知</span>
            </div>
          </td>
          <td>
            <div>
              <span v-if="form[item.value].cp100 === 1" style="color: #85ce61">成功宣贯</span>
              <span v-if="form[item.value].cp100 === 0" style="color: #f78989">宣贯失败</span>
              <span v-if="form[item.value].cp100 === -1">未知</span>
            </div>
          </td>
          <td>
            <div>
              <span v-if="form[item.value].es === -1">未知</span>
              <span v-if="form[item.value].es === 1" style="color: #85ce61">100%执行</span>
              <span v-if="form[item.value].es === 2">执行一般</span>
              <span v-if="form[item.value].es === 3" style="color: #f78989">未执行</span>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { geCharterDiagnoseByNo } from '@/api/diagnose';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyCharterData = {
  id: undefined,
  c1: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c2: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c3: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c4: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c5: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c6: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c7: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c8: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c9: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  c10: { hsc: false, sdr: false, sdcl: false, cp100: false, es: 1 },
  coachId: null,
  coachName: null,
};

const AttrC = [
  { value: 'c1', name: '【进攻】月业绩管理及奖惩', tip: '是否满足SMART原则：明确、可衡量、可实现、相关和有时限的目标' },
  { value: 'c2', name: '【进攻】人力薪资与提成制度', tip: '硬件、政策等是否有利于离院运营顾客和花更多时间在顾客上。' },
  { value: 'c3', name: '【SOP】顾客院内动线SOP及奖惩', tip: '是否便于执行落地，是否有助于形成肌肉记忆，顾客体感如何' },
  { value: 'c4', name: '【运营】人力考勤与排班管理', tip: '是否以“方便顾客”视角设计' },
  { value: 'c5', name: '【运营】顾客档案管理（私）', tip: '是否便于启动私域' },
  { value: 'c6', name: '【运营】耗品进销存管理', tip: '是否便于执行' },
  { value: 'c7', name: '【交付】规范性操作', tip: '是否便于执行，顾客是否可感知' },
  { value: 'c8', name: '【防守】迎检应急管理', tip: '是否便于执行' },
  { value: 'c9', name: '【防守】操作应急预案与管理', tip: '是否真实落地' },
  { value: 'c10', name: '【日常】门店卫生与医疗卫生', tip: '顾客感知，迎检过关' },
];

export default {
  name: 'Diagnose8',
  data() {
    return {
      salon: {},
      formModel: AttrC,
      form: EmptyCharterData,
      rules: {},
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {},
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose8();
    },
    loadDiagnose8: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyCharterData);
      const errAlertMsg = '查询制度复盘信息失败';
      await geCharterDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form.id = ret.id;
            AttrC.forEach(x => {
              if (ret[x.value]) {
                this.form[x.value].hsc = ret[x.value].hsc;
                this.form[x.value].sdr = ret[x.value].sdr;
                this.form[x.value].sdcl = ret[x.value].sdcl;
                this.form[x.value].cp100 = ret[x.value].cp100;
                this.form[x.value].es = ret[x.value].es;
              }
            });
          }
        })
        .catch(err => {
          console.log('geCharterDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  .diagnose_8_table {
    width: 100%;
    display: block;
  }

  .diagnose_8_table table {
    border-collapse: collapse;
  }

  .diagnose_8_table th {
    @extend .salon_model_lable_th;
    text-align: center;
    vertical-align: middle;
  }
  .diagnose_8_table td {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_8_table td .in_td_title {
    margin: 0 5px 0 0;
  }
}
</style>
